<!--
* Created by Sean on 2017/9/29.
* Login
-->
<template>
  <div id="login" class="login">
    <group class="login-container">
      <x-input :show-clear="false"placeholder="请输入手机号" mask="99999999999" v-model="mobile" ref="mobile" type="tel" is-type="china-mobile" text-align="right" :max="11" :should-toast-error="false">
        <img slot="label" src="../../images/user-name.png">
      </x-input>
      <x-input :show-clear="false"placeholder="请输入登录密码" type="password" v-model="password" text-align="right">
        <img slot="label" src="../../images/password.png">
      </x-input>
      <x-button type="primary" style="margin-top: 18px;" @click.native="signIn">登录</x-button>
      <p class="link-wrapper">
        <router-link to="/findPwd">忘记密码</router-link>
        <router-link to="/register" class="link-right">注册</router-link>
      </p>
    </group>
  </div>
</template>
<script>
  import { Blur } from 'vux'
  export default {
    name: 'Login',
    components: {
      Blur
    },
    data () {
      return {
        mobile: '',
        password: '',
        headImgUrl: require('../../images/avatar_default.png')
      }
    },
    // created () {
    //   let that = this
    //   document.onkeyup = function () {
    //     if (window.event.keyCode === 13) that.signIn()
    //   }
    // },
    methods: {
      signIn () {
        if (this.checkMobile() && this.checkPassword()) {
          this.$axiosPosting(this.$api.login, {
            mobile: this.mobile,
            pwd: this.password,
            // theUserType: 1,
            openId: window.localStorage.getItem('openId')
          }).then(json => {
            if (json.code === '0000') {
              window.localStorage.setItem('userInfo', JSON.stringify(json.data))
              // 从哪里来，回到哪里去
              let toRouter = window.localStorage.getItem('toRouter') || '/'
              this.$router.replace({ path: toRouter })
            } else {
              this.$vux.toast.text(json.msg, 'middle')
            }
          })
        }
      },
      // 校验手机号
      checkMobile () {
        if (this.mobile.trim() === '') {
          this.$vux.toast.text('请输入手机号', 'middle')
          return false
        }
        if (this.$refs.mobile.valid === false) {
          this.$vux.toast.text('手机号格式不正确', 'middle')
          return false
        }
        return true
      },
      // 校验密码
      checkPassword () {
        if (this.password.trim() === '') {
          this.$vux.toast.text('请输入密码', 'middle')
          return false
        }
        return true
      }
    }
  }
</script>
<style lang="less">
  .login {
    min-height: 100vh;
    padding: 0 .75rem;
    background: url("../../images/login_bg1.png") no-repeat center/100% 100%;
    .login-container {
      padding-top: 8.75rem;
    }
    .image-wrapper {
      text-align: center;
      padding-top: 4rem;
      font-size: 0;
    }
    .image-wrapper img {
      width: 8rem;
      height: 8rem;
      border-radius: 50%;
      border: .2rem solid rgba(255, 255, 255, .4);
    }
    .weui-cells {
      margin-top: 1.6rem;
      background: transparent;
    }
    .weui-cells .vux-x-input:first-child{
      margin-bottom: 0.5rem;
    }
    .weui-cells:before {
      border: none;
    }
    .weui-cells:after {
      border: none;
    }
    .vux-x-input {
      padding: .8rem 0;
      background: rgba(255,255,255,0.5);
      border-radius: 0.35rem;
      padding-left: 0.75rem;
      height: 2.05rem;
      box-sizing: border-box;

    }
    .weui-input {
      color: #999;
      text-align: left!important;
    }
    .weui-btn {
      margin-top: .9rem !important;
      border-radius: 0.3rem;
    }
    .link-wrapper {
      margin-top: .6rem;
      line-height: 1;
      a {
        font-size: 0.7rem;
        color: #999;
      }
      .link-right {
        float: right;
      }
    }
  }
</style>
